<!-- From Uiverse.io by Uncannypotato69  - Tags: glassmorphism, purple, white, card, card hover, tailwindcss -->
<div
  class="relative flex h-[12em] w-[18em] items-center justify-center rounded-[1.5em] border-[1px] border-[rgba(107,33,168,1)] bg-[rgba(107,33,168,0.24)] p-[1.5em] text-lime-300"
>
  <div
    class="group absolute left-1/2 top-1/2 flex h-[3em] w-[3em] -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-[1.5em] border-[1px] border-[#ffffffaa] bg-[#8988885c] backdrop-blur-[6px] duration-[500ms] hover:h-[10em] hover:w-[16em] hover:rounded-[1.5em]"
  >
    <svg
      class="h-[1.5em] w-[1.5em] duration-300 group-hover:opacity-0"
      viewBox="0 0 48 48"
      fill="none"
      height="48"
      width="48"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clip-path="url(#a)">
        <path
          clip-rule="evenodd"
          d="M21.6 36h4.8V21.6h-4.8V36ZM24 0C10.8 0 0 10.8 0 24s10.8 24 24 24 24-10.8 24-24S37.2 0 24 0Zm0 43.2C13.44 43.2 4.8 34.56 4.8 24 4.8 13.44 13.44 4.8 24 4.8c10.56 0 19.2 8.64 19.2 19.2 0 10.56-8.64 19.2-19.2 19.2Zm-2.4-26.4h4.8V12h-4.8v4.8Z"
          fill-rule="evenodd"
          fill="#fff"
        ></path>
      </g>
      <defs>
        <clipPath id="a">
          <path d="M0 0h48v48H0z" fill="#fff"></path>
        </clipPath>
      </defs>
    </svg>
    <div
      class="items-left duration-600 absolute left-0 top-0 flex h-[10em] w-[16em] translate-y-[100%] flex-col justify-between p-[1.5em] font-nunito text-[hsl(0,0%,85%)] group-hover:translate-y-0"
    >
      <div class="items-left flex flex-col justify-center">
        <h1 class="text-[1.5em] font-bold leading-[0.8em]">Heading</h1>
        <p class="text-[0.9em] font-light">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore
          magni repudiandae tenetur odio
        </p>
      </div>

      <p class="cursor-pointer text-[0.7em] underline">learn more</p>
    </div>
  </div>
  <h1 class="text-center font-nunito text-[2em] font-black text-purple-950">
    hover over the info icon
  </h1>
</div>


    